import {
  Box,
  Button,
  Card,
  CardBody,
  CardHeader,
  Flex,
  Heading,
  Icon,
  SimpleGrid,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { Link } from 'react-router-dom';
import { FaBook, FaGraduationCap, FaChartBar } from 'react-icons/fa';
import { IconType } from 'react-icons';

interface Feature {
  title: string;
  description: string;
  icon: IconType;
  path: string;
  color: string;
}

const Home = () => {
  const cardBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  const features: Feature[] = [
    {
      title: 'Vocabulary',
      description: 'Learn new words with interactive flashcards',
      icon: FaBook,
      path: '/vocabulary',
      color: 'brand.500',
    },
    {
      title: 'Practice',
      description: 'Test your knowledge with various exercises',
      icon: FaGraduationCap,
      path: '/practice',
      color: 'orange.400',
    },
    {
      title: 'Progress',
      description: 'Track your learning journey and achievements',
      icon: FaChartBar,
      path: '/progress',
      color: 'green.400',
    },
  ];

  return (
    <Box maxW="container.md" mx="auto">
      <Heading as="h2" size="xl" mb={8} textAlign="center">
        Welcome to LingoLearn
      </Heading>

      <Text fontSize="lg" mb={10} textAlign="center" color="gray.600">
        Learn English effectively with our mobile-first approach
      </Text>

      <SimpleGrid columns={{ base: 1, md: 3 }} spacing={6} mb={10}>
        {features.map((feature, index) => (
          <Card
            key={index}
            bg={cardBg}
            border="1px"
            borderColor={borderColor}
            boxShadow="md"
            transition="transform 0.2s"
            _hover={{ transform: 'translateY(-5px)' }}
          >
            <CardHeader>
              <Flex alignItems="center">
                <Icon as={feature.icon} boxSize={8} color={feature.color} mr={3} />
                <Heading size="md">{feature.title}</Heading>
              </Flex>
            </CardHeader>
            <CardBody>
              <Text mb={4}>{feature.description}</Text>
              <Button
                as={Link}
                to={feature.path}
                colorScheme="brand"
                variant="outline"
                size="sm"
                width="full"
              >
                Start Learning
              </Button>
            </CardBody>
          </Card>
        ))}
      </SimpleGrid>

      <Box textAlign="center" py={6}>
        <Text fontSize="sm" color="gray.500">
          Practice daily to improve your English skills
        </Text>
      </Box>
    </Box>
  );
};

export default Home;
